<template>
	<view class="box">
		<view class="no">
			不知道怎么选？
		</view>
		<view class="top">
			<p>{{text}}</p>
			<span>{{text1}}</span>
			
		</view>
		<!--文字上下滚动-->
		  <view class="scroll">
		    <image :src="src" mode="widthFix" class="image"/>
		    <swiper class="gui" autoplay="true" circular vertical="true"> 
		      <swiper-item  v-for="(item,index) in notice" :key="index" >
		        <view>{{item.title}}</view>
		      </swiper-item>
		        <!-- <swiper-item>山东柏瑞，做有温度的教育</swiper-item>
		        <swiper-item>教育是服务，用阳光的形象引领学生的健康成长</swiper-item> -->
		    </swiper>
		  </view>
		<view class="aa1">
			<view class="">
				{{text3}}
			</view> 
			<view class="aa2">
				{{text4}}
			</view>
		</view>
		<view class="bb">
			<view class="bba" v-for="(item,index) in bb" :key="index" @click="tian(index)">
				<view class="bbb " :class="{'active':itemIndex == index}">
					<image :src="item.src" mode="widthFix" ></image>
				</view>
				<view class="bbc">
					{{item.text}}
				</view>
				<view class="bbd">
					{{item.text1}}
				</view>
			</view>
		</view>
		<view class="aab">
			{{text5}}
			<view class="bba" v-for="(item,index) in aab" :key="item.id" @click="tian(item.id)">
				<view class="bbb" >
					<image :src="item.src" mode="widthFix" :class="{'active':itemIndex == 4}"></image>
				</view>
				<view class="bbc">
					{{item.text}}
				</view>
				<view class="bbd">
					{{item.text1}}
				</view>
			</view>
		</view>
		<view class="an">
			<button>{{text6}}</button>
		</view>
		<!-- <view class="active">
		
		</view> -->
		<!-- <view class="xz">
			<h1>选择专快车渠道</h1>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				itemIndex:0,
				text:'选择您车辆的用途',
				// src1:'../../static/duihao1.png',
				text1:'您填写的所有信息,都能帮助我们,为您打造最合适的服务',
				src:'../../static/qiche.png',
				notice:[
					{
						id:'1',title:'车主8692认证商用车后，—年节省5612.04元油费',
					},
					{
						id:'2',title:'车主7278认证商用车后，—年节省4674.86元油费',
					},
					{
						id:'3',title:'车主5666认证商用车后，—年节省5976.26元油费',
					}
				],
				text3:'商用车',
				text4:'点击查看专属福利',
				text5:'非商用车',
				text6:'下一步',
				bb:[{
					id:1,
					src:'../../static/qiche.png',
					text:'物流车/商务车',
					text1:'货车、七座及以上商用车'
				},
				{
					
					src:'../../static/qiche.png',
					text:'专快车/顺风车',
					text1:''
				},
				{
					id:3,
					src:'../../static/qiche.png',
					text:'出租车',
					text1:''
				}],
				aab:[{
					id:4,
					src:'../../static/qiche.png',
					text:'私家车',
					text1:'家用小轿车、摩托车'
				}]
			}
		},
		methods:{
			tian:function(index){
				console.log(index)
				this.itemIndex=index
				
			}
		},
		created(){
			this.bb.src= require('../../static/cj1.png')
			this.src1= require('../../static/cj1.png')
		}
	}
</script>

<style>
	.no{display: flex;flex-direction: row;justify-content: flex-end;}
	.scroll{position: relative;text-indent: 1em;}
	.gui{height: 28px;text-indent: 1.5em;margin-top: 15rpx;font-size: 14px;background-color: #f8f8f8;display: flex;align-items: center;padding: 15rpx 0rpx 10rpx 10rpx;}
	.image{width: 45rpx;display: block;position: absolute;left: 3px;bottom: 9px;vertical-align: middle;}
	.box{margin: 20rpx;}
	.top{font-size: 50rpx;}
	.top span{font-size: 27rpx;color: #C3C3C3;}
	.aa{width: 100%;height: 70rpx;background-color: #F9F8F8;font-size: 25rpx;}
	.aa img{width: 70rpx;height: 70rpx;}
	.aa1{display: flex;margin: 30rpx 0;}
	.aa2{margin-left: 50rpx;font-size: 25rpx;border: red 1rpx dashed;line-height: 50rpx;width: 200rpx;text-align: center;color: red;}
	.bb{display: flex;width: 100%;border-bottom: #C3C3C3 1rpx solid;}
	.bba{width: 30%;margin: 8rpx;}
	.bbb image{width: 100%;border-radius: 50%;}
	
	.bbc{font-size: 30rpx;line-height: 60rpx;text-align: center;}
	.bbd{font-size: 25rpx;color: #C3C3C3;margin-bottom: 50rpx;text-align: center;}
	.an button{width: 550rpx;background-color: red;color: #fff;}
	/* .active{border-radius: 50%;width: 117px;height: 117px;border: #f00 2px solid;
	background: url(../../static/qiche.png)  center no-repeat  , radial-gradient(circle, #edc4d2,#edc4d2, #eb5266) !important ;
	} */
	.active{border: #f0f 1px solid;background: url(../../static/qiches.png) no-repeat;background-size: 100%;border-radius: 50%;}
</style>